<template>
    <div style="background-color: #f9fafd;padding-top: 59px;">
        <div class="w centerauto">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 60px;">
                <el-breadcrumb-item :to="{ path: '/projectslist' }">项目大厅</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/projectsdetail' }">项目详情</el-breadcrumb-item>
                <el-breadcrumb-item>竞标报名</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="panel mb_30">
                <p class="item_title">提交竞标方案</p>
                <div class="padding_16">
                    <el-form ref="form" :rules="formrules" :model="form" label-width="110px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="我的报价：" prop="pb_offer">
                                    <el-input placeholder="请填写您的竞标报价, 范围：1-1000000" type="number" v-model="form.pb_offer">
                                        <template slot="append">元</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="预估周期：" prop="pb_days">
                                    <el-input placeholder="请填写您预计完成此项目的时间周期, 最大 500 天" type="number" v-model="form.pb_days">
                                        <template slot="append">天</template>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="竞标优势：" prop="pb_content">
                            <el-input type="textarea" :rows="6" v-model="form.pb_content" placeholder="中标的关键一步，不可忽视。一份好的竞标优势介绍说明，可以极大的提升您在该项目中的中标率，建议您结合该项目需求、技能要求等综合阐述说明您比别人更适合承接该项目，并如何优秀的开展项目实施工作。最大 1000 字"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col :span="22">
                                <el-form-item label="项目案例：" prop="pb_case_id_arr">
                                    <el-select v-model="form.pb_case_id_arr" multiple placeholder="请选择与需求相关的项目案例" style="width: 100%;">
                                        <el-option v-for="(item,index) in caseOpt" :key="index" :label="item.cp_name" :value="item.cp_id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2" class="text-right" style="margin-top: 3px;">
                                <el-button type="primary" size="small" @click="addcase">添加</el-button>
                            </el-col>
                        </el-row>
                        <el-form-item label="附件：">
                            <el-upload ref="upload" class="upload-demo" drag action="string" :http-request="UploadImage" :on-remove="handleRemove" :on-change="uploadChange" :on-success="uploadSuccess" :file-list="filelistarr">
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>，上传您的竞标文档，例如：个人介绍、团队介绍、详细开发计划等，最大不超过 15 MB</div>
                                <div class="el-upload__tip" slot="tip"></div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item class="text-center">
                            <el-button type="primary" @click="onSubmit('form')" class="btn_200">提交竞标方案</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    
    import '../../assets/css/projects.css'
    export default {
        data(){
            return{
                form: {
                    'pb_offer': '',
                    'pb_days': '',
                    'pb_content': '',
                    'pb_case_id_arr': [],
                    'pb_enclosure': '',
                },
                formrules: {
                    'pb_offer': [
                        { required: true, message: '请输入您的竞标报价金额', trigger: 'blur' }
                    ],
                    'pb_days': [
                        { required: true, message: '请填写您的预估周期', trigger: 'blur' }
                    ],
                    'pb_content': [
                        { required: true, message: '请输入您的竞标优势，提升中标率，最大1000字', trigger: 'blur' }
                    ],
                },
                caseOpt: [],
                fileAllUidList: [],
                filefIdList: [],
                filelistarr: [],
                delarr: [],
            }
        },
        methods: {
            init(){
                var _this = this;
                // 项目案例列表
                this.$httpPost('/api/index/Project/projectDmoList',{'u_id': window.localStorage.uid}).then(response => {
                    
                    if(response.code == 200){
                        
                        _this.caseOpt = response.msg;

                    }else if(response.code == 301){  //暂无数据
                        _this.caseOpt = [];
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                })
            },
            //添加项目案例
            addcase(){
                this.$router.push({path: '/case',query: {'edit': ''}});
            },
            //覆盖默认的上传行为，可以自定义上传的实现
            UploadImage(param){
                
                const formData = new FormData();
                formData.append('files', param.file);
                formData.append('uid', window.localStorage.uid);

                var _this = this;
                // 上传附件
                this.$httpPost('/api/index/Project/uploadfiles',formData).then(response => {
                    
                    if(response.code == 200){
                        
                        this.$message({
                            message: response.msg,
                            type: 'success'
                        });

                        param.onSuccess(response.fid);

                    }else if(response.code == 301){
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                        _this.$refs.upload.clearFiles();
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });

            },
            //删除附件
            handleRemove(file, fileList){
                
                var _this = this;

                var sub = this.fileAllUidList.indexOf(file.uid);  //下标

                if(sub != -1){
                    //请求接口  删除文件
                    _this.delfile(this.filefIdList[sub]);
                    _this.fileAllUidList.splice(sub,1);
                    _this.filefIdList.splice(sub,1);

                }else{  //编辑页   删除该项目原始图片
                    
                    for(var i=0;i<_this.filelistarr.length;i++){
                        if(_this.filelistarr[i].id == file.id){
                            
                            _this.delarr.push(_this.filelistarr[i].id);
                            
                        }
                    }
                }
            },
            //删除附件
            delfile(picid){
                this.$httpGet('/api/index/Project/delFiles',{'f_id': picid}).then(response => {

                    if(response.code == 200){

                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //附件  change
            uploadChange(file,fileList){
                
                this.fileUidlist = [];
                for(var i=0;i<fileList.length;i++){
                    this.fileUidlist.push(fileList[i].uid);
                }
                
            },
            //上传成功
            uploadSuccess(response, file, fileList){
                
                this.filefIdList = [];
                this.fileAllUidList = [];
                for(var i=0;i<fileList.length;i++){
                    
                    this.filefIdList.push(fileList[i].response);
                    this.fileAllUidList.push(fileList[i].uid);
                }
                
            },
            //提交
            onSubmit(formName){
                var _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {

                        let data = {};
                        data.pb_pid = _this.$route.query.pid;
                        data.pb_uid = window.localStorage.uid;
                        data.pb_offer = _this.form.pb_offer;
                        data.pb_days = _this.form.pb_days;
                        data.pb_content = _this.form.pb_content;
                        data.pb_case_id = _this.form.pb_case_id_arr.join(',');
                        data.pb_enclosure = _this.filefIdList.join(',');

                        this.$httpPost('/api/index/Project/biddingProject',data).then(response => {

                            if(response.code == 200){

                                this.$message({
                                    message: response.msg,
                                    type: 'success'
                                });

                                setTimeout(() => {
                                    _this.$router.push({
                                        path: '/receiveditem'
                                    })
                                }, 2000);

                            }else{
                                this.$message({
                                    message: response.msg,
                                    type: 'warning'
                                });
                            }

                        });
                    }else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
        },
        mounted(){
            this.init();
        },
    }
</script>